<script>
import api from "@/api";

export default {
  name: "index",
  data() {
    return {
      total: 0,
      tableData: [],
      currentTab: 1,
      queryParam: {
        keyword: "",
        searchType: "",
        type: "机构职能和设置",
        pageSize: 5,
        pageNum: 1
      }
    }
  },
  watch: {
    currentTab() {
      if (this.currentTab == 2) {
        this.fetchData()
      }
    }
  },
  methods: {
    handlerSearch() {
      this.queryParam.pageNum = 1
      this.tableData = []
      this.total = 0
      this.fetchData()
    },
    async fetchData() {
      let data = await api.xing_zheng_gong_kai(this.queryParam);

      this.tableData = data.records;
      this.total = data.total
    },
    handleCurrentChange(size) {
      this.queryParam.pageNum = size
      this.fetchData()
    },
    handleSizeChange(size) {
      this.queryParam.pageSize = size
      this.fetchData()
    }
  }
}
</script>

<template>
  <el-row>
    <el-col :span="24" v-if="currentTab==2">
      <div class="flex items-center">
        <el-select v-model="queryParam.searchType" clearable>
          <el-option value="" label="全部">全部</el-option>
          <el-option value="biao_ti" label="标题"></el-option>
          <el-option value="zheng_wen" label="正文"></el-option>
          <el-option value="wen_hao" label="文号"></el-option>
          <el-option value="ji_gou" label="机构"></el-option>
          <el-option value="mo_kuai" label="模块"></el-option>
        </el-select>
        <el-input v-model="queryParam.keyword" placeholder="请输入关键字"></el-input>
        <el-button type="default" icon="el-icon-search" @click="()=>{
          $router.push(`/zhu_dong_gong_kai/search?searchType=${queryParam.searchType}&keyword=${queryParam.keyword}`)
        }"></el-button>
      </div>
    </el-col>
    <el-col :span="24" class="bg-white mt-2 p-3">
      <div class="flex items-center">
        <div :class="[currentTab===1?'bg-[#2d66a5] text-white':'bg-[#eaeaea] text-[#2d66a5]']"
             class="font-bold  px-4 py-3  mr-1 cursor-pointer" @click="currentTab=1">领导信息
        </div>
        <div :class="[currentTab===2?'bg-[#2d66a5] text-white':'bg-[#eaeaea] text-[#2d66a5]']"
             class="font-bold px-4 py-3  mr-1 cursor-pointer" @click="currentTab=2">机构职能和设置
        </div>
      </div>
    </el-col>
    <el-col v-if="currentTab==1" :span="24" class="bg-white p-3">
      <div>
        <div class="flex">
          <div style="width: 6px;background: #2d66a5" class="mr-1 mb-2"></div>
          市长
        </div>
        <div class="flex justify-center  px-[40px] mt-[10px]">
          <div class="flex  flex-col">
            <img class="w-[110px] h-[155px]"
                 src="">
            <div class="text-center">xxx</div>
          </div>
        </div>
      </div>
      <div>
        <div class="flex">
          <div style="width: 6px;background: #2d66a5" class="mr-1 "></div>
          常务副市长
        </div>
        <div class="flex justify-start px-[40px] mt-[10px]">
          <div class="flex  flex-col">
            <img class="w-[110px] h-[155px]"
                 src="">
            <div class="text-center">xxx</div>
          </div>
        </div>
      </div>
      <div>
        <div class="flex">
          <div style="width: 6px;background: #2d66a5" class="mr-1 "></div>
          副市长
        </div>
        <div class="flex justify-start px-[40px] mt-[10px] flex-wrap ">
          <div v-for="(item,index) in 10" style="flex: 0 0 25%">
            <div class="flex  flex-col mr-3 mb-3">
              <div class="flex justify-center">
                <img class="w-[110px] h-[155px]"
                     src="">

              </div>
              <div class="text-center">xxx</div>
            </div>
          </div>

        </div>
      </div>
    </el-col>
    <el-col v-if="currentTab==2">
      <div>
        <el-row>
          <el-col :span="24">
            <el-table

                :data="tableData"
                style="width: 100%">
              <el-table-column
                  show-overflow-tooltip
                  label="下载">
                <template #default="{row}">
                  <div class="p-3">
                    <div class="text-lg text-black">{{ row.title }}</div>
                    <div class="flex justify-between">
                      <span class="py-1">发文机构：<span>{{ row.department }}</span></span>
                      <span class="py-1">文号：<span>{{ row.articleNo }}</span></span>
                      <span class="py-1">发文日期：<span>{{ row.createdAt }}</span></span>
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24" class="mt-2 flex justify-center">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParam.pageNum"
                :page-sizes="[5,10,20]"
                :page-size="queryParam.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<style scoped>

</style>
